<template>
    <div class="header" :style="`position: ${ position }; background-color: ${ bg }`">
        <div class="exit-btn" @click="exit"></div>
        <div class="title">{{ title }}</div>
        <div class="icon" v-if="has_right_btn" @click="btnClick" :style="`--icon: url(${ right_btn_icon })`"></div>
    </div>
</template>

<script setup>
defineProps({
    title: { type: String, default: "" },
    exit: { type: Function, default: () => {} },
    has_right_btn: { type: Boolean, default: false },
    right_btn_icon: { type: String, default: "" },
    btnClick: { type: Function, default: () => {} },
    bg: { type: String, default: "#fff" },
    position: { type: String, default: "sticky" },
});
</script>

<style scoped lang="less">
.header {
    width: 100%;
    min-height: 15vw;
    height: 15vw;
    top: 0;
    left: 0;

    .exit-btn {
        --size: 2.5vw;
        --line-width: 0.1vw;
        width: var(--size);
        height: var(--size);
        border-top: 0.1vw solid var(--text-color);
        border-left: 0.1vw solid var(--text-color);
        position: absolute;
        top: 50%;
        left: 4vw;
        transform: translateY(-50%) rotate(-45deg);
    }

    .title {
        font-size: 4vw;
        font-weight: 500;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }

    .icon {
        --size: 5vw;
        --w: var(--size);
        --h: var(--size);
        position: absolute;
        top: 50%;
        right: 4vw;
        transform: translateY(-50%);
    }
}
</style>